<template>
  <div class="container" @scroll="scrollHandler" ref='scroll'>
    <div class="meixiangMain" >
      <img src="../../assets/images/3.jpg" class="fl-l mg-t mg-l userImg flex-grow-1"/>
      <div class="meixiangTitle clearfix">
        <div class="flex-col flex-grow-1">
          <div class="flex-row">
            <div class="username flex-grow-0 mg-t mg-l" style="font-size: .8rem">赤子之心</div>
            <div class="flex-grow-1 mg-t mg-l" style="font-size: .9rem">一次很好的购物</div>
          </div>
          <div class="flex-row flex-grow-1 flex-y-center">
            <div class="subtit flex-grow-1 mg-l" style="font-size: .8rem">2018.3.8</div>
            <div class="flex-grow-0 moneyColor guanzhu mg-r">+关注(200)</div>
          </div>
        </div>

      </div>
      <div class="meixiangText pd">衣服很好衣服很好衣服很好衣服很好衣服很好衣服很好衣服很好衣服很好衣服很好衣服很好衣服很好衣服很好衣服很好衣服很好</div>
    <div class="scroll">
      <img src="../../assets/images/img/1.jpg"  class="flex-grow-1"/>
      <img src="../../assets/images/img/1.jpg"  class="flex-grow-1"/>
      <img src="../../assets/images/img/1.jpg"  class="flex-grow-1"/>
    </div>
      <div class="view-bottom pd-r pd-b">
        <span>评论<img src='@/assets/images/icon/btn-comment.png'></span>
        <span>点赞<img src='@/assets/images/icon/btn-love.png'></span>
        <span>打赏<img src='@/assets/images/icon/btn-good.png'></span>
      </div>
    </div>
    <div class="meixiangMain mg-t clearfix">
      <img src="../../assets/images/3.jpg"  class="fl-l mg-t mg-l userImg"/>
      <div class="meixiangTitle clearfix">
        <div class="flex-col flex-grow-1 ">
          <div class="flex-row">
            <div class="username flex-grow-1 mg-t mg-l" style="font-size: .8rem">赤子之心</div>
            <div class="flex-grow-0  mg-r"><img src="../../assets/images/icon/comment.png" class="commentIcon mg-t "/></div>
          </div>
          <div class="flex-row flex-grow-1 flex-y-center">
            <div class="subtit flex-grow-1 mg-l" style="font-size: .8rem">2018.3.8</div>
          </div>
        </div>

      </div>
      <div class="meixiangText pd mg-l-big">东西不错东西不错东西不错东西不错东西不错东西不错东西不错东西不错东西不错东西不错东西不错东西不错东西不错</div>
      <div class="commentBox mg-r mg-b mg-l-big">
         <div class="comment pd-r-l pd-t"><span class="commentId">张三:</span>你说的不错</div>
         <div class="comment pd"><span class="commentId">李四:</span>赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同</div>
         <div class="comment pd-r-l pd-b"><span class="commentId">张三</span>回复<span class="commentReid">李四:</span>好棒好棒好棒</div>
      </div>
    </div>
    <div class="meixiangMain mg-t clearfix">
      <img src="../../assets/images/3.jpg"  class="fl-l mg-t mg-l userImg"/>
      <div class="meixiangTitle clearfix">
        <div class="flex-col flex-grow-1 ">
          <div class="flex-row">
            <div class="username flex-grow-1 mg-t mg-l" style="font-size: .8rem">赤子之心</div>
            <div class="flex-grow-0  mg-r"><img src="../../assets/images/icon/comment.png" class="commentIcon mg-t "/></div>
          </div>
          <div class="flex-row flex-grow-1 flex-y-center">
            <div class="subtit flex-grow-1 mg-l" style="font-size: .8rem">2018.3.8</div>
          </div>
        </div>

      </div>
      <div class="meixiangText pd mg-l-big">东西不错东西不错东西不错东西不错东西不错东西不错东西不错东西不错东西不错东西不错东西不错东西不错东西不错</div>
      <div class="commentBox mg-r mg-b mg-l-big">
        <div class="comment pd-r-l pd-t"><span class="commentId">张三:</span>你说的不错</div>
        <div class="comment pd"><span class="commentId">李四:</span>赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同赞同</div>
        <div class="comment pd-r-l pd-b"><span class="commentId">张三</span>回复<span class="commentReid">李四:</span>好棒好棒好棒</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        unlocation: true
      }
      },
        methods: {
          scrollHandler(e) {
            // 监听滚动到底部
            let scroll = this.$refs.scroll;
            // console.log(this.$refs.scroll.scrollTop);
            // console.log(this.$refs.scroll.scrollHeight);
            // console.log(this.$refs.scroll.offsetHeight);
            if (scroll.scrollTop >= (scroll.scrollHeight - scroll.offsetHeight)) {
              this.$message({
                message: '滚动到底部了！',
                type: 'warning'
              });
            }
          }
        }
      }



</script>

<style scoped lang="less">
  .container{
    background-color: #eee;
  }
  .meixiangMain{
    background-color: #fff;
  }
  .userImg{
    border-radius: 50%;
    height: 2rem;
    width: 2rem;
  }
  .fl-r {
    float: right;
  }
  .fl-l {
    float: left;
  }
  .pd-r{
    padding-right: .5rem;
  }
  .scroll {
    margin-top: .5rem;
    background-color: #fff;
    height: 5rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    img {
      height: 100%;
      margin-left: .5rem;
    }
  }
  .mg-l-big{
      margin-left: 2.5rem;
  }
  .title-follow{
    position: relative;
  }
  .view-bottom {
    margin-top: .5rem;
    text-align: right;
    img {
      height: .7rem;
      width: .7rem;
      margin-left: .2rem;
    }
    span {
      margin-left: .8rem;
    }
  }
  .commentIcon{
    height: 1rem;
    width: 1rem;
  }
  .commentBox{
    background-color: #eee;
  }
  .commentId ,.commentReid{
    color: #4F94CD;
    padding: 0 .1rem;
  }
</style>
